<template>
  <el-dialog :title="title" :visible.sync="visible" @close="close" width="720px">
    <!-- <el-button type="infor"
               icon="el-icon-download"
               @click="downloadFn"
               :loading="downloadBtnLoading">下载模板</el-button> -->
    
    <div class="upload__wrap mb20">
      <upLoad-btn :posture="posture" :on-success="onSuccess" accept=".xlsx, .xls" :rawFile="rawFile" :size="maxSize" :disabled="!(!rawFile)">选择Excel</upLoad-btn>
      <el-button type="text"
               @click="downloadFn"
               class="ml20"
               :loading="downloadBtnLoading"><a :href="downLoadUrl" :download="downLoadFileName">下载模板</a></el-button>
    </div>
    <div v-if="rawFile && !posture" class="file-list mb20">
        <p>{{rawFile.name}}</p><i class="el-icon-circle-close text-primary" @click="removeFile"></i>
      </div>
    <dl class="text">
      <dt>导入事项：</dt>
      <dd>1、请将excel文件的所有单元格格式设置为“文本”格式</dd>
      <dd>2、导入上传一次只能上传一个Excel，最大不超过{{maxSize}}M</dd>
      <dd>3、支持xls和xlsx格式，默认支持 Excel 2003 和 Excel 2007</dd>
    </dl>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="okClick" :loading="loading">确 认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { VUpLoadBtn as UpLoadBtn } from "@/components";
// import { downLoadFile, $downloadAdminExcel } from '@/utils'
import config from '@/service/config'
export default {
  components: {
    UpLoadBtn
  },
  props: {
    loading: Boolean,
    title: {
      type: String,
      default: "EXCEL"
    },
    value: Boolean,
    files: null,
    rawFile: null,
    downLoadUrl: String,
    downLoadFileName: {
      type: String,
      default: '模板.xls'
    },
    maxSize: {
      type: Number,
      default: 500
    }
  },
  data () {
    return {
      downloadBtnLoading: false,
      posture: false,
      btnStatus: true, // 用于防止重复点击
      tempURL: config.BASH + '/ExcelImportModel.xls'
    }
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  methods: {
    okClick() {
       if (this.btnStatus) {
        this.btnStatus = false
        let self = this
        setTimeout(function() {
          self.btnStatus = true
        }, 3000)
      } else {
        return false
      }
      this.$emit('ok-click')
    },
    close() {
      this.visible = false;
      this.$emit('update:rawFile', null)
      this.$emit('update:files', null)
    },
    onSuccess(files, rawFile) {
      this.$emit('update:rawFile', rawFile)
      this.$emit('update:files', files)
    },
    downloadFn() {
      this.downloadBtnLoading = true
      // let res = downLoadFile(this.downLoadUrl, 'get', {})
      // this.downloadBtnLoading = false;
      // if (res) $downloadAdminExcel(res.data, `模板`);
      let self = this
      setTimeout(function() {
        self.downloadBtnLoading = false
      }, 2000)
    },
    removeFile () {
      this.rawFile = null
    }
  }
};
</script>
<style scoped lang="scss">
.upload__wrap {
  display: flex;
  .text {
    padding-left: 20px;
    dt {
      color: #40424d;
      font-size: 14px;
      font-weight: bold;
      padding-bottom: 10px;
    }
    dd {
      color: #757780;
      font-size: 14px;
      line-height: 21px;
    }
  }
  a {
    text-decoration: underline;
    font-style: oblique;
  }
}
.file-list {
  position: relative;
  padding: 4px 10px;
  background: #fafafa;
  width: 450px;
  P {
    width: 400px;
  }
  i {
    position: absolute;
    top: 7px;
    right: 10px;
    cursor: pointer;
  }
}
</style>
